<template>
    <div class="control-wrapper">
        <div class="control-top">
            <el-tag type="success" color="black" size="medium" effect="light">控制设备</el-tag>
        </div>
        <div class="control-center">
            <div class="machine">
                <machineSlot>
                    <p slot="machineName">卷帘机</p>
                </machineSlot>
                <machineSlot>
                    <p slot="machineName">增氧机</p>
                </machineSlot>
                <machineSlot>
                    <p slot="machineName">换水伐</p>
                </machineSlot>
                <machineSlot>
                    <p slot="machineName">水泵</p>
                </machineSlot>
            </div>
            <div class="abnormal">
                <equipmentCharts></equipmentCharts>
            </div>
        </div>
    </div>
</template>

<script>
    import machineSlot from "../../../components/common/machineSlot";
    import equipmentCharts from "./equipmentCharts";
    export default {
        name: "controlEquipment",
        components:{
            machineSlot,
            equipmentCharts,
        }
    }
</script>

<style scoped lang="scss">
    .control-wrapper{
        height: 5.5rem;
        font-size: 0.2rem;
        .control-top{
            height: 0.5rem;
        }
        .control-center{
            height: 5rem;
            display: flex;
            .machine{
                width: 40%;
                height: 100%;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-around;
                align-items: center;
            }
            .abnormal{
                width: 60%;
                height: 100%;
            }
        }
    }
</style>
